---
type: tutorial
title: Add an RSS feed
description: >-
  Tutorial: Build your first Astro blog —

  Install Astro's official package for creating a feed that your readers can
  subscribe to
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - Install an Astro package for creating an RSS feed for your website
  - Create a feed that can be subscribed to and read by RSS feed readers
</PreCheck>

## Install Astro's RSS package

Astro provides a custom package to quickly add an RSS feed to your website. 

This official package generates a non-HTML document with information about all of your blog posts that can be read by **feed readers** like Feedly, The Old Reader, and more. This document is updated every time your site is rebuilt.

Individuals can subscribe to your feed in a feed reader, and receive a notification when you publish a new blog post on your site, making it a popular blog feature.

<Steps>
1. In your terminal, quit the Astro development server (<kbd>Ctrl + C</kbd>) and run the following command to install Astro's RSS package.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @astrojs/rss
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @astrojs/rss
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @astrojs/rss
      ```
      </Fragment>
    </PackageManagerTabs>

2. Restart the dev server to begin working on your Astro project again.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

## Create an `.xml` feed document

<Steps>
1. Create a new file in `src/pages/` called `rss.xml.js`

2. Copy the following code into this new document. Customize the `title` and `description` properties, and if necessary, specify a different language in `customData`:

    ```js title="src/pages/rss.xml.js"

    import rss, { pagesGlobToRssItems } from '@astrojs/rss';

    export async function GET(context) {
      return rss({
        title: 'Astro Learner | Blog',
        description: 'My journey learning Astro',
        site: context.site,
        items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
        customData: `<language>en-us</language>`,
      });
    }
    ```

3. Add the `site` property to the Astro config with your site's own unique Netlify URL.

    ```js title="astro.config.mjs" ins={4}
    import { defineConfig } from "astro/config";

    export default defineConfig({
      site: "https://example.com"
    });
    ```
    
4. Visit `http://localhost:4321/rss.xml` and verify that you can see (unformatted) text on the page with an `item` for each of your `.md` files. Each item should contain blog post information such as `title`, `url`, and `description`.

    :::tip[View your RSS feed in a reader]
    Download a feed reader, or sign up for an online feed reader service and subscribe to your site by adding your own Netlify URL. You can also share this link with others so they can subscribe to your posts, and be notified when a new one is published.
    :::

</Steps>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] I can install an Astro package using the command line.
- [ ] I can create an RSS feed for my website.
</Checklist>
</Box>

### Resources

- [RSS item generation in Astro](/en/recipes/rss/#using-glob-imports)
